<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="pageParam.model.patientName"
        style="width: 200px;"
        placeholder="姓名查询..."
        class="filter-item"
        @keyup.enter.native="handleFilter"
        @input="handleFilter"
      />
      <!-- <el-select style="width: 140;" v-model="pageParam.orderParams" class="filter-item" placeholder="创建时间">
        <el-option v-for="item in createTimeOrderOptions" :key="item.key" :label="item.label" :value="item.value" />
      </el-select> -->
      <el-select v-model="adviceStatus" placeholder="请选择执行类别" @change="checkStatus()">
        <el-option label="全部" value=""/>
        <el-option label="未开始" value="0"/>
        <el-option label="执行中" value="1"/>
        <el-option label="已结束" value="2"/>
      </el-select>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        添加
      </el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="list" fit highlight-current-row style="width: 100%;" @sort-change="sortChange">
      <el-table-column class="filter-item" type="expand">
        <template slot-scope="{row}">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="护理类型" label-width="120px">
              <span>{{ row.nursingRoutine }}</span>
            </el-form-item>
            <el-form-item label="护理级别" label-width="120px">
              <span>{{ row.nursingLevel }}</span>
            </el-form-item>
            <el-form-item label="饮食建议" label-width="120px">
              <span>{{ row.dietType }}</span>
            </el-form-item>
            <el-form-item label="检查项目">
              <span>{{ row.treatment }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="patientName" label="病人姓名" width="120px"/>
      <el-table-column prop="doctorName" label="医生姓名" width="120px"/>
      <el-table-column prop="nurseName" label="护士姓名" width="120px"/>
      <el-table-column prop="nursingStatus" label="执行状态" width="120px">
        <template slot-scope="scope">
          <span v-text="status(scope.row)"/>
        </template>
      </el-table-column>
      <el-table-column sortable="custom" prop="treatmentStarttime" label="开始时间" width="180px"/>
      <el-table-column sortable="custom" prop="treatmentEndtime" label="结束时间" width="180px"/>

      <el-table-column label="操作" fit>
        <template slot-scope="{row,$index}">
          <el-button size="small" type="success" @click="view(row.id)">查看记录</el-button>
          <el-button v-if="row.treatmentEndtime===null" size="small" type="warning" @click="handleUpdate(row)">编辑
          </el-button>
          <el-button v-if="row.treatmentEndtime===null" size="small" type="danger" @click="stop(row)">停止</el-button>
          <el-button v-else size="small" type="info">已停止</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页组件 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getListByPage"
    />
    <!-- 弹窗组件 -->
    <el-dialog title="添加医嘱" :visible.sync="dialogFormVisible">
      <el-form
        label-position="right"
        label-width="140px"
        style="width: 400px; margin-left:50px;"
      >

        <el-form-item label="输入病人住院编号" prop="time">
          <el-input v-model="no"/>
          <el-button @click="getPatientByNo">
            查询
          </el-button>
          <span>{{ application == null ? "" : application.patientName }}</span>
        </el-form-item>

        <el-form-item label="执行护士名">
          <el-select v-model="temp.nurseId" placeholder="请选择护理人员">
            <el-option v-for="item in nurseList" :key="item.id" :label="item.realName" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="temp.treatmentStarttime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="护理类型">
          <el-select v-model="temp.nursingRoutine" placeholder="请选择类型">
            <el-option label="常规护理" value="常规护理"/>
            <el-option label="养生护理" value="养生护理"/>
            <el-option label="基础护理" value="基础护理"/>
          </el-select>
        </el-form-item>
        <el-form-item label="护理级别">
          <el-select v-model="temp.nursingLevel" placeholder="请选择护理级别">
            <el-option label="一级护理" value="一级护理"/>
            <el-option label="二级护理" value="二级护理"/>
            <el-option label="三级护理" value="三级护理"/>
            <el-option label="特级护理" value="特级护理"/>
          </el-select>
        </el-form-item>
        <el-form-item label="饮食建议">
          <el-input v-model="temp.dietType" type="textarea"/>
        </el-form-item>
        <el-form-item label="检查项目">
          <el-input v-model="temp.treatment" type="textarea"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="createData()">
          确认
        </el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogPvVisible" title="修改医嘱">
      <el-form ref="dataForm" label-position="right" label-width="80px">
        <!--               style="width: 400px; margin-left:50px;">-->
        <el-form-item label="护理类型">
          <el-select v-model="temp.nursingRoutine" placeholder="请选择类型">
            <el-option label="常规护理" value="常规护理"/>
            <el-option label="养生护理" value="养生护理"/>
            <el-option label="基础护理" value="基础护理"/>
          </el-select>
        </el-form-item>
        <el-form-item label="护理级别">
          <el-select v-model="temp.nursingLevel" placeholder="请选择护理级别">
            <el-option label="一级护理" value="一级护理"/>
            <el-option label="二级护理" value="二级护理"/>
            <el-option label="三级护理" value="三级护理"/>
            <el-option label="特级护理" value="特级护理"/>
          </el-select>
        </el-form-item>
        <el-form-item label="饮食建议">
          <el-input v-model="temp.dietType"/>
        </el-form-item>
        <el-form-item label="检查项目">
          <el-input v-model="temp.treatment"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">完成</el-button>
      </span>
    </el-dialog>
    <!-- 查看执行记录 -->
    <el-drawer
      title="医嘱执行记录"
      :visible.sync="table"
      direction="rtl"
      size="40%">
      <el-table :data="actionList" @sort-change="sort">
        <el-table-column sortable="custom" property="actionTime" label="执行日期"></el-table-column>
        <el-table-column property="name" label="执行护士姓名"></el-table-column>
      </el-table>
      <pagination
        v-show="actionTotal>0"
        :total="actionTotal"
        :page.sync="actionPageParam.pageNum"
        :limit.sync="actionPageParam.pageSize"
        @pagination="getActionList"
      />
    </el-drawer>
  </div>
</template>

<script>
import {getByNo} from '@/api/application/application'
import {getNurseByDepId} from '@/api/his_user/his_user'
import {
  add,
  update,
  getAllAdvice,
  stop
} from '@/api/advice'
import {getAllAction} from "@/api/doctorAdvice/doctorAdvice";
// 导入组件  记得声明组件
import Pagination from '@/components/Pagination'
import {selectAdviceAction} from '@/api/doctorAdvice/doctorAdvice'

export default {
  components: { // 在这里声明组件
    Pagination
  },
  data() {
    return {
      copy:undefined,
      adviceStatus: undefined,
      table: false,
      actionList: [],
      actionTotal: 0,
      actionPageParam: {
        pageNum: 1,
        pageSize: 5,
        model: {
          doctorAdviceId: ''
        },
        orderParams: []
      },
      title: '',
      application: null,
      no: '',
      list: [], // 列表数据
      total: 0,
      listQuery: { // 分页 排序  查询参数
        pageNum: 1,
        pageSize: 5
      },
      fieldQuery: { // 按字段查询
        realName: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      dialogPvVisible: false,
      temp: {
        id: undefined,
        patientId: '',
        dietType: '',
        treatment: '',
        nurseId: '',
        treatmentStarttime: '',
        nursingLevel: '',
        nursingRoutine: ''
      },
      pageParam: {
        pageNum: 1,
        pageSize: 5,
        model: {
          patientName: '',
          treatmentStarttime: '',
          treatmentEndtime: '',
          end: ''
        },
        orderParams: []
      },
      nursingList: [],
      nurseList: []
    }
  },
  created() {
    this.getListByPage()
    this.copy=JSON.parse(JSON.stringify(this.temp));
  },
  methods: {
    checkStatus() {
      this.pageParam.model.treatmentStarttime=''
      this.pageParam.model.treatmentEndtime=''
      this.pageParam.model.end=''
      switch (this.adviceStatus) {
        case '':
          break;
        case '0':
          const now = new Date()
          this.pageParam.model.treatmentStarttime = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate() +
            ' ' + now.toLocaleTimeString('chinese', {hour12: false})
          break;
        case '1':
          const end = new Date()
          this.pageParam.model.treatmentEndtime = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate() +
            ' ' + end.toLocaleTimeString('chinese', {hour12: false})
          break;
        case '2':
          this.pageParam.model.end = 'true'
          break;
      }
      this.getListByPage();
    },
    //获取执行医嘱的列表
    getActionList() {
      getAllAction(this.actionPageParam).then(res => {
        // console.log(res)
        this.actionList = res.content.list
        this.actionTotal = res.content.total
      }).catch(err => {
        console.log(err)
      })
    },
    // 查看执行记录
    view(id) {
      if (this.actionPageParam.model.doctorAdviceId === id) {
        return;
      }
      this.actionPageParam.model.doctorAdviceId = id;
      this.table = true;
      this.getActionList();
    },
    status(row) {
      if (row.treatmentEndtime !== null) {
        return '已结束'
      }
      let startTime = new Date(row.treatmentStarttime)
      const nowTime = new Date().getTime()
      startTime = startTime.getTime()
      if (Math.floor(nowTime / 8640000) > Math.floor(startTime / 8640000)) {
        return '执行中'
      } else {
        return '未开始'
      }
    },
    // 根据病人住院编号获取病人信息
    getPatientByNo() {
      getByNo(this.no).then(res => {
        this.application = res.content
        this.nurseList = []
        this.temp.nurseId = ''
        // 获取该科室下面的护士
        if (this.application == null) {
          return
        }
        this.temp.patientId = this.application.patientId
        getNurseByDepId(this.application.depId).then(res => {
          this.nurseList = res.content
        })
      })
    },
    handleUpdate(row) {
      this.dialogPvVisible = true
      this.temp = row
    },
    submit() {
      // 添加病人状态,修改护理记录为以完成
      update(this.temp).then(res => {
        this.$notify({
          title: 'Success',
          message: 'Created Successfully',
          type: 'success',
          duration: 2000
        })
        this.getListByPage()
        this.dialogPvVisible = false
      })
    },
    sort(val) {
      const order = val.order === 'ascending' ? 'asc' : 'desc'
      let orderParam = 'a.action_time' + ' ' + order
      this.actionPageParam.orderParams = []
      this.actionPageParam.orderParams.push(orderParam)
      this.getActionList()
    },
    sortChange(val) {
      // console.log("排序参数",val)
      const prop = val.prop
      const order = val.order === 'ascending' ? 'asc' : 'desc'
      let orderParam
      if (prop == 'treatmentStarttime') {
        orderParam = 'treatment_starttime' + ' ' + order
      } else {
        orderParam = 'treatment_endtime' + ' ' + order
      }
      this.pageParam.orderParams = []
      this.pageParam.orderParams.push(orderParam)
      this.getListByPage()
    },
    getListByPage() {
      this.pageParam.pageNum = this.listQuery.pageNum
      this.pageParam.pageSize = this.listQuery.pageSize
      getAllAdvice(this.pageParam).then(res => {
        // console.log(res)
        this.list = res.content.list
        this.total = res.content.total
      }).catch(err => {
        console.log(err)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getListByPage()
    },
    handleCreate() {
      this.dialogFormVisible = true
      this.temp=JSON.parse(JSON.stringify(this.copy));
    },
    createData() {
      add(this.temp).then(() => {
        this.dialogFormVisible = false
        this.$notify({
          title: 'Success',
          message: 'Created Successfully',
          type: 'success',
          duration: 2000
        })
        this.getListByPage()
      })
    },
    stop(row) {
      stop(row.id).then(() => {
        this.$notify({
          title: 'Success',
          message: 'Created Successfully',
          type: 'success',
          duration: 2000
        })
        this.getListByPage()
      })
    }
  }
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
